import React, { Component } from 'react'

import styles from '../style/index.less';

const lsImg = require('../images/蓝色.png');
const lvImg = require('../images/绿色.png');
const zsImg = require('../images/紫色.png');
const qlImg = require('../images/浅蓝.png');
const gdtdImg = require('../images/工单退单.png');
const gdyqImg = require('../images/工单延期.png');
const kfdImg = require('../images/客服单.png');
const rwdImg = require('../images/任务单.png');
const yhtsImg = require('../images/用户投诉.png');


export default class Tab extends Component {

  // tab项配置
  tabConfig = {
    KFRX: { title: '客服热线', bgimg: lsImg, img: kfdImg },
    WXGD: { title: '维修工单', bgimg: lvImg, img: rwdImg },
    WJGD: { title: '完结工单', bgimg: qlImg, img: gdyqImg },
    YHZX: { title: '用户咨询', bgimg: zsImg, img: gdtdImg },
    YHTS: { title: '用户投诉', bgimg: lsImg, img: yhtsImg },
  }

  // 生成Tab
  getTab = () => {
    const { tabsModule } = this.props;
    return (
      tabsModule.map(ele => {
        const { title, bgimg, img } = this.tabConfig[ele.key];
        const { month, year, total } = ele;
        return (
          <div className={styles.tabBox} style={{ backgroundImage: `url(${bgimg})` }} key={ele.key}>
            <div className={styles.tabBox_left}>
              <p className={styles.left_type}>{total} <span>{title}</span></p>
              <p className={styles.left_month}><span>本月：</span>{month}</p>
              <p className={styles.left_year}><span>本年：</span>{year}</p>
            </div>
            <div className={styles.tabBox_right}>
              <img alt={""} src={img} style={{ width: '52px', height: '52px' }} />
            </div>
          </div>
        )
      })
    )
  }

  render() {
    return (
      <>
        {this.getTab()}
      </>
    )
  }
}
